<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>医生详情</title>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../css/cw.css"/>
    <script src="../js/global.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery-2.1.4.min.js"></script>
    <script src="../js/mui.min.js"></script>
    <script type="text/javascript" src="../js/public.js" ></script>
    <script type="text/javascript" src="../js/app/pay.js" ></script>
    <script type="text/javascript" src="../js/app/find-doctor.js" ></script>
    <script type="text/javascript" charset="UTF-8">
      	mui.init();
    </script>
    <style type="text/css">
   		.bbs-ico{padding: 10px 15px;}
   		.bbs-ico{padding-bottom:0px;position:relative;}
   		.bbs-ico{padding-bottom:5px;}
		.bbs-ico>div:nth-child(1)>i{width: 60px;display:block;float:left;}
		.bbs-ico>div:nth-child(1)>i>img{border-radius:50%;height:60px;width: 100%;}
		.bbs-ico>div:nth-child(1)>div{width:calc(100% - 60px);float:left;padding-left:10px;}
		.bbs-ico>div:nth-child(1)>div>li{margin-top: 7px;}
		.mui-grid-view.mui-grid-9{background:white;}
		.doctor-nav{padding-right: 0;padding-bottom: 0;}
		.video-li{margin-left: 3%;}
		.video-yuyue{margin-right: 3%;}
     /*.mui-bar .mui-btn{width:50%;height: 44px;border-radius: initial;border:none;top: 0;}
          .mui-bar-footer{padding: 0;}
          .right-btn{width:50% !important;margin-left: -6px;background:#8dc21f ;}*/
        /*弹窗*/
    	.zhifzzao{display:none;position:fixed;top:0;left: 0;right:0;bottom: 0;background:rgba(0,0,0,.5);z-index: 2;}
    	.zhiftc{display:none;font-size:15px;position:fixed;bottom: 10px;right: 0;left: 0;width:94%;left: 3%;z-index: 5;}
        .mui-table-view-cell{background:white;text-align: center;}
        .colorse{color:#8dc21f}
        .mui-table-view-cell:after{left: 0;}
    </style>
</head>
<body>
	<header id="header" class="mui-bar mui-bar-nav">
		<i class="mui-icon mui-icon-back mui-action-back"></i>
		<h1 class="mui-title ">医生详情</h1>
	</header> 
	<div id="content" class="mui-content">
		<div class="table-view table-view-cell bbs-ico ">
			<div class="overflow-h">
				<i><img class="avatar" src="../images/iconic.png"/></i>
				<div>
					<li>
						<span class="name"></span>&nbsp;
						<span class="mui-h6 resign"></span>	
					</li>
					<li class="mui-h6">
						<span class="chief"></span>
					</li>
				</div>
			</div>	
		</div>
		<!--九宫-->
		<ul class="mui-table-view mui-grid-view doctor-3">
	        <li class="mui-table-view-cell mui-media mui-col-xs-4">
	            <a href="#text">
	            <div class="mui-media-body tex">图文咨询</div>
	            <span class="iconfont color-yellowish pictext">&#xe644;</span>
	            <button class="color-yellowish pictext">&#65509;<span class="textbox">0</span>元/次</button>
	            </a>
	        </li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-4">
	            <a href="#phone">
	            <div class="mui-media-body pho">电话咨询</div>
	            <span class="iconfont color-yellowish tel">&#xe645;</span>
	            <button class="color-yellowish tel">&#65509;<span class="telcall">0</span>元/次</button>
	            </a>
	        </li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-4">
	           <a href="#video">
	           <div class="mui-media-body vid">视频咨询</div>
	            <span class="iconfont color-yellowish shipin">&#xe633;</span>
	            <button class="color-yellowish shipin">&#65509;<span class="video">0</span>元/次</button>
	            </a>
	        </li>
		</ul>
		<div class="background margin-bottom-1 table-view-cell font-14 surgery">
			工作时间：
		</div>
		<div class="background margin-bottom-1 table-view-cell font-14">
			医师详情
		</div>
		<div class="table-view-cell background doctor-text">
		</div>
		
	<div id='text'class="mui-popover mui-popover-action mui-popover-bottom">
		<div class="table-view-cell background table-view doctor-nav ">
			<div class="iconfont color-yellowish">&#xe644;</div>
			<div class="">
				<li>
					<span>图文预约-<span class="name"></span></span>
					<span class="color-red mui-pull-right mui-h5">&#65509;<span class="textbox"></span>元/次</span>
				</li>
				<li><span class=" mui-h6">通过文字、图片进行咨询</span></li>
			</div>
			<a href="#text">
				<button class="background-y mui-btn mui-btn-block text-li">立即预约</button>
			</a>
		</div>
	</div>
	
	<div id='phone'class="mui-popover mui-popover-action mui-popover-bottom">
		<div class="table-view-cell background table-view doctor-nav ">
			<div class="iconfont color-yellowish">&#xe645;</div>
			<div class="">
				<li>
					<span>电话预约-<span class="name"></span></span>
					<span class="color-red mui-pull-right mui-h5">&#65509;<span class="telcall"></span>元/次</span>
				</li>
				<li><span class=" mui-h6">与医生进行电话咨询</span></li>
			</div>
			<a href="#phone">
				<button class="background-y mui-btn mui-btn-block phone-li">立即预约</button>
			</a>
		</div>
	</div>
	
	<div id='video'class="mui-popover mui-popover-action mui-popover-bottom">
		<div class="table-view-cell background table-view doctor-nav ">
			<div class="iconfont color-yellowish">&#xe633;</div>
			<div class="">
				<li>
					<span>视频预约-<span class="name"></span></span>
					<span class="color-red mui-pull-right mui-h5">&#65509;<span class="video"></span>元/次</span>
				</li>
				<li><span class=" mui-h6">通过视频向医生面对面行咨询</span></li>
			</div>
			<div class="find-doc-nav-2 overflow-h clear-both">
			<a href="#video">
				<button class="background-y mui-btn mui-btn-block mui-pull-left video-li">立即预约</button>
				<button class="background-y mui-btn mui-btn-block mui-pull-right video-yuyue">选择预约时间</button>
			</a>
			</div>
		</div>
	</div>
	
</div>
<!--弹窗-->
	<div class="zhifzzao"></div>
	<div class="zhiftc">
		<div class="mui-table-view-cell" style="border-radius: 5px 5px 0 0;">
			选择支付方式
		</div>
		<div class="mui-table-view-cell colorse cols weixin">
			微信支付
		</div>
		<div class="mui-table-view-cell colorse cols alipay">
			支付宝支付
		</div>
		<div class="mui-table-view-cell colorse cols UnionPay">
			银联支付
		</div>
		<div class="mui-table-view-cell colorse cols" style="border-radius: 0 0 5px 5px;">
			余额支付
		</div>
		<div class="mui-table-view-cell cols" style="margin-top: 5px;border-radius: 5px;color:#AAAAAA">
			取消
		</div>
	</div>
</body>

<script type="text/javascript">
/*图文*/
	$(".text-li").on('tap',function(){
        $('.zhifzzao').show();
    	$('.zhiftc').slideDown();
	});
/*电话*/
	$(".phone-li").on('tap',function(){
		$('.zhifzzao').show();
    	$('.zhiftc').slideDown();
	});
	//关闭弹出框
	$('.cols').on('tap',function(){
    	$('.zhifzzao').fadeOut(500);
    	$('.zhiftc').slideUp();
    });
    $('.doctor-3 li').on('tap', function(){
    	$(this).find('span, button').removeClass('color-yellowish');
    	$(this).siblings().find('span, button').addClass('color-yellowish');
    })
/*视频*/	
//	$(".video-li").on('tap',function(){
//		openNewpage('find-doctor-time-video-ing.html');
//	});
//	$(".video-yuyue").on('tap',function(){
//		openNewpage('find-doctor-time-video.html');
//	})
</script>
</html>